<template>
  <f7-page>
    <f7-navbar title="红包设置" back-link="返回">
      <f7-nav-right>
        <f7-button @click="open()" v-if="upOrAdd">{{openSet?'修改':'取消'}}</f7-button>
      </f7-nav-right>
    </f7-navbar>
    <f7-list simple-list>
      <f7-list-item>
        <span>{{addRedcardParam.name}}</span>
        <!-- <span v-if="openSet">
          <span>已开启</span>
        </span> -->
        <label class="toggle">
          <input type="checkbox" v-model="redCard">
          <span class="toggle-icon"></span>
        </label>
      </f7-list-item>
    </f7-list>
    <f7-block>
      <h5 class="text-gray">
        开启后，司机首次挂靠到您物流企业时，系统将自动赠送红包给新人司机，此红包仅用于支付信息费
      </h5>
    </f7-block>
    <div v-if="redCard">
      <form class="list inline-labels no-hairlines-md">
        <ul>
          <li>
            <label class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">红包金额(元)</div>
                <div class="item-input-wrap">
                  <input type="text" v-model="addRedcardParam.money" placeholder="请输入" class="text-align-right">
                </div>
              </div>
            </label>
          </li>
          <li>
            <a class="item-content item-input item-link">
              <div class="item-inner">
                <div class="item-title item-label">有效时间</div>
                <!-- <div class="item-after"> -->
                <myDatepicker @dtpkChange="driverDeadline" :date="date"></myDatepicker>
                <!-- {{addRedcardParam.time_validity==''?'请选择':(addRedcardParam.time_validity | dataFmt_fmt1('yyyy.MM.dd'))}} -->
                <!-- </div> -->
              </div>
            </a>
          </li>
        </ul>
      </form>
      <div class="gap-20 ticket-bg row">
        <div class="col-25 text-align-center ticket-left">
          <h4 class="text-lightwhite">现金红包</h4>
          <h1 class="text-white gap-3">￥{{addRedcardParam.money?addRedcardParam.money:0}}</h1>
        </div>
        <div class="col-auto ticket-right">
          <h3>{{userInfo.nick_name}}&nbsp;现金红包</h3>
          <h5 class="text-gray1 gap-3">有效时间：{{addRedcardParam.time_creation|dateTime}}-{{addRedcardParam.time_validity|dateTime}}</h5>
          <h5 class="text-gray1 gap-3">仅限支付{{userInfo.nick_name}}信息费使用</h5>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <f7-block>
      <h4>累计发放
        <span class="float-right" @click="goList(addRedcardParam._id)">发放记录></span>
      </h4>
      <h1>￥0</h1>
    </f7-block>
{{addRedcardParam}}
    <f7-toolbar v-if="openSet">
    
      <f7-button class="" @click="submit()">确定</f7-button>
    </f7-toolbar>

  </f7-page>
</template>

<script>
import utilsCommon from '../../utils/common'
import myDatepicker from '../../components/datetimepicker'

export default {
  name: 'app',
  components: { myDatepicker },
  filters: {
    dateTime: function (value) {
      if (!value) return ''
      let time=new Date(value)
      return time.getFullYear() + '/' +(time.getMonth()+1) + '/'+time.getDate() 
    }
  },
  data () {
    return {
      userInfo: {},
      redCard: true,
      addRedcardParam: {
        name: '合作司机新人礼包',
        money: 100,
        time_validity: new Date(),
        time_creation: new Date()
      },
      now: new Date(),
      openSet: true,
      redcardInf: null,
      upOrAdd: true,
      date:{}
    }
  },
  methods: {
    async getuserInfo () {
      this.userInfo = (await this.AccountService.getBusinessCard()).data.data
    },
    open () {
      this.openSet = !this.openSet
      if (this.openSet) {
        this.getRedCard()
      }
    },
    formValid () {
      let result = {
        alow: false,
        msg: ''
      }
      if (this.addRedcardParam.money == '' || this.addRedcardParam.money == 0) {
        result.alow = false
        result.msg = '请填写红包金额'
      } else if (!this.addRedcardParam.time_validity) {
        result.alow = false;
        result.msg = '请填写有效期';
      } else {
        result.alow = true;
      }
      return result;
    },
    addRedcard () {
      let formValid = this.formValid()
      if (!formValid.alow) {
        this.toast(formValid.msg)
        return false
      }
      this.addRedcardParam.status = this.redCard ? 'effective' : 'cancelled'

    },
    async getRedCard () {
      let getRedCardRep = await this.mineService.redCardGetOne()
      if (getRedCardRep.data.status === 'success') {

        this.openSet = getRedCardRep.data.data ? true : false;
        this.upOrAdd = getRedCardRep.data.data ? true : false;
        if (this.openSet && getRedCardRep.data.data._id) {       
          this.redcardInf = getRedCardRep.data.data;

          this.redCard = getRedCardRep.data.data.status == 'effective' ? true : false;
          this.addRedcardParam._id=getRedCardRep.data.data._id;
          this.addRedcardParam.name = getRedCardRep.data.data.name;
          this.addRedcardParam.money = getRedCardRep.data.data.money;
          this.addRedcardParam.time_validity = getRedCardRep.data.data.time_validity;
          //父传子
          this.date={time: this.$options.filters['dateTime'](getRedCardRep.data.data.time_validity)}
        }

      }
    },
    async redCardEdit () {

      let editRedCard = await this.mineService.redCardEdit({
        card_id: this.addRedcardParam._id,
        money: this.addRedcardParam.money,
        name: this.addRedcardParam.name,
        time_validity: this.addRedcardParam.time_validity,
        status:'effective'
      });
      if(editRedCard.data.data._id){
        alert('修改成功')
      }
    },
    async redCardAdd () {
      let addRedCard = await this.mineService.redCardAdd({
        money: this.addRedcardParam.money,
        name: this.addRedcardParam.name,
        time_validity: this.addRedcardParam.time_validity,
        status:'effective'
      })
      if(addRedCard.data.data._id){
        alert('成功')
      }
    },
    submit (){
      if(this.addRedcardParam._id){
        this.redCardEdit()
      }else{
        this.redCardAdd()
      }
    },
    driverDeadline(data){
      //子传父
      this.addRedcardParam.time_validity=new Date(data)
    },
    goList(v){
      if(v){
        this.$f7.router.navigate('/mine/trafficCouponLogSu/'+v)
      }
      
    }
  },
  mounted () {
    this.getuserInfo()
    this.getRedCard()
  }
}
</script>

<style scoped>
.ios .button {
  border: none;
}
.ios .list {
  margin: 0;
  font-size: 14px;
  z-index: 20;
}
.list .item-link {
  z-index: 20;
}
.ios .block {
  margin: 10px 0 40px 0;
}
.ios .inline-labels .item-label {
  font-size: 14px;
}
.ios .list input[type='text'] {
  font-size: 14px;
}

.ticket-bg {
  background: url('../../assets/img/ticket-bg.png') no-repeat center center;
  width: 355px;
  height: 93px;
  margin: 30px 0 30px 10px;
}
.ticket-left {
  padding: 22px 0 0 20px;
}
.ticket-right {
  padding: 19px 20px 0 0;
}
.ios .row .col-25 {
  width: 25%;
}
</style>
